

// 设计图 375px下  100px === 1rem

// 整个屏幕 100vw == 375px, 1vw = 3.75px

// 1vw = 375 / 100 = 3.75px

// 100px等于多少vw？

// 100px = 100 / (375 / 100) = 26.66666vw;

// 1rem等于75px，只是为了好计算边界问题。
$base: 75;

html {
    font-size: 100vw / (375 / $base);
}

// 定义最小屏幕的rem
@media screen and (max-width: 320px) {
    $base: 64;
    html {
        font-size: 64px;
    }
}

// 定义最大屏幕的rem
@media screen and (min-width: 540px) {
    $base: 108;
    html {
        font-size: 108px;
    }
}

@function rem($px) {
    @return $px / $base * 1rem;
}

body {
    font-size: 14px;
    color: #333333;
}